<template>
	<view class="selectMap">
		<!-- 弹出层 -->
		<u-button type="info" @tap="popShow = true">选择作业位置</u-button>
		<u-popup v-model="popShow" mode="top" length="57%">
			<view class="popup">
				<view class="map" style="background-color: transparet;">
					<map style="width: 100%; height: 600rpx;" :latitude="map.latitude" :longitude="map.longitude" :markers="map.covers"
					 :enable-overlooking="true" :enable-satellite="true" :enable-3D="true" scale="14"></map>
				</view>

				<view class="selectSite">
					<u-row :gutter="0">
						<u-col :span="9">
							<u-input placeholder="请输入查询位置名"></u-input>
						</u-col>
						<u-col :span="3">
							<u-button type="primary" @tap="selectPath">确定</u-button>
						</u-col>
					</u-row>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popShow: false,
				// 地图参数 start
				map: {
					current: 0,
					latitude: null,
					longitude: null,
					covers: [{
						latitude: null, //纬度，范围为-90~90，负数表示南纬				
						longitude: null, //经度，范围为-180~180，负数表示西经				
					}],
				}

				// 地图参数 end
			};
		},
		created() {
			this.getLocation()
		},
		onShow() {
			this.getSetting()
		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: res => {
						console.log(res)
						this.map.latitude = res.latitude
						this.map.longitude = res.longitude
						this.map.covers[0].latitude = res.latitude
						this.map.covers[0].longitude = res.longitude
					},
					fail: () => {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				})
			},
			selectPath() {
				console.log(this.map)
			},
			//判断是否已经授权
			getSetting() {
				const that = this
				uni.getSetting({
					success(res) {
						console.log(res)
						if (res.authSetting['scope.userLocation']) {
							that.getLocation()
						} else {
							that.getAuthorize()
						}
					}
				})
			},
			//  获取用户的地理位置，
			getLocation() {
				const that = this
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success(res) {
						console.log(res)
					}
				})
			},
			// 用户授权
			getAuthorize() {
				const that = this
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						that.getLocation()
					},
					// 授权失败
					fail(err) {
						uni.showModal({
							title: '提示',
							content: '请授权位置获取附近的商家!',
							showCancel: false,
							confirmText: '确认授权',
							success() {
								uni.openSetting({
									success(res) {
										console.log(res)
									},
									fail(err) {
										console.log(err)
									}
								})
							}
						})
					}
				})
			}



		}

	}
</script>

<style lang="scss">
	.selectMap {
		padding: 30rpx;

		.popup {
			padding: 15rpx 30rpx;

			.map {}

			.selectSite {
				margin-top: 30rpx;
			}
		}
	}
</style>
